<template>
  <div class="layout">
    <div class="layout-header">
      <div class="text ysbth">惠济区检察院一案一表填录系统</div>
    </div>
    <div class="layout-body">
      <div class="form-layout">
        <div class="arrow-left" />
        <div class="arrow-right" />
        <div class="line" />
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="dv-form">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" type="text" placeholder="请输入账户">
              <i slot="prefix" class="el-icon-user-solid" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              auto-complete="off"
              type="passwrod"
              show-password
              placeholder="请输入密码"
            >
              <i slot="prefix" class="el-icon-lock" />
            </el-input>
          </el-form-item>
          <el-form-item v-if="captchaEnabled" prop="code">
            <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="验证码"
              @keyup.enter.native="handleLogin"
            >
              <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
            </el-input>
            <div class="login-code">
              <img :src="codeUrl" class="login-code-img">
            </div>
          </el-form-item>
          <el-form-item>
            <div class="outer">
              <div class="inner">
                <el-button
                  :loading="loading"
                  size="medium"
                  type="primary"
                  style="width:100%;"
                  class="btn"
                  @click.native.prevent="handleLogin"
                >
                  <span v-if="!loading">登 录</span>
                  <span v-else>登 录 中...</span>
                </el-button>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 流星 -->
    <div class="star" style="left:200px;animation-duration:5s;animation-delay:0;" />
    <div class="star" style="left:300px;animation-duration:8s;animation-delay:2s;transform:scale(0.7);" />
    <div class="star" style="left:50%;animation-duration:6s;animation-delay:0.7s;transform:scale(0.9);margin-left:-100px" />
    <div class="star" style="left:50%;animation-duration:10s;animation-delay:1s;transform:scale(0.6);" />
    <div class="star" style="left:50%;animation-duration:5s;animation-delay:0.2s;transform:scale(0.9);margin-left:100px" />
    <div class="star" style="right:400px;animation-duration:12s;animation-delay:3s;transform:scale(0.7);" />
    <div class="star" style="right:320px;animation-duration:10s;animation-delay:1s;transform:scale(0.4);" />
    <div class="star" style="right:180px;animation-duration:5.5s;animation-delay:0.5s;" />
  </div>
</template>

<script>
import { getCodeImg } from '@/api/login'
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: 'Login',
  data() {
    return {
      codeUrl: '',
      loginForm: {
        username: '',
        password: '',
        code: '',
        uuid: ''
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入您的账号' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入您的密码' }
        ],
        code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
      },
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$router.push({ path: '/' }).catch(() => {})
          return
          // this.loading = true
          // this.$store.dispatch('Login', {
          //   username: encrypt(this.loginForm.username),
          //   password: encrypt(this.loginForm.password),
          //   code: this.loginForm.code,
          //   uuid: this.loginForm.uuid
          // }).then(() => {

          // }).catch(() => {
          //   this.loading = false
          //   if (this.captchaEnabled) {
          //     this.getCode()
          //   }
          // })
        }
      })
    }
  }
}
</script>
<style lang="scss">
input:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: none !important;
  transition: background-color 5000s ease-in-out 0s;
}
</style>
<style lang="scss" scoped>
@font-face {
  font-family: "PMZD";
  src: url("~@/assets/font/pmzd.ttf");
}
::v-deep{
  .dv-form{
    .el-input__inner,
    .el-textarea__inner {
      background: transparent;
      border-color: #1687cc !important;
      color: #fff !important;
    }
    .el-textarea__inner,
    .el-input__inner{
      border-radius: 0 !important;
      -webkit-border-radius: 0 !important;
      -moz-border-radius: 0 !important;
      -ms-border-radius: 0 !important;
      -o-border-radius: 0 !important;
    }
    .el-input.is-disabled .el-input__inner,.el-textarea.is-disabled .el-textarea__inner,.vue-treeselect--disabled .vue-treeselect__control,
    .el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus {
      background: rgba(0,0,0,0.15) !important;
    }
  }
}
.pmzd {
  font-family: "PMZD";
}
.layout {
  width: 100%;
  height: 100%;
  background: url("~@/assets/login/bg.png") no-repeat center;
  background-size: 100% 100%;
  // background-size:cover;
  padding: 0;
  overflow: hidden;
  position: relative;
  .layout-header {
    height: 82px;
    background: #196cbf;
    background: url("~@/assets/login/header-bg.gif") no-repeat center;
    background-size: 100% 100%;
    display:flex;
    align-items: center;
    justify-content: center;
    .text {
      font-size:36px;
      color:transparent;
      background: linear-gradient(180deg,#ffffff,#fff 40%,#4ba0d3);
      background-clip: text;
      margin-top:-14px;
      position: relative;
    }
  }
  .layout-body {
    height: calc(100% - 82px);
    display: flex;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
    .form-layout {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index:10;
      transform: translate(-50%, -50%);
      width: 617px;
      height: 480px;
      background: url("~@/assets/login/login-bg.png") no-repeat center;
      background-size: 100% 100%;
      padding: 0 100px;
      padding-top: 140px;
      box-sizing: border-box;
      .arrow-left {
        position:absolute;
        left:190px;
        top:73px;
        width:36px;
        height:24px;
        background:url('~@/assets/login/arrow-left.png') no-repeat center;
        background-size:100% 100%;
        animation:left 3s ease-out infinite;
      }
      .arrow-right {
        position:absolute;
        right:190px;
        top:73px;
        width:36px;
        height:24px;
        background:url('~@/assets/login/arrow-right.png') no-repeat center;
        background-size:100% 100%;
        animation:right 3s ease-out infinite;
      }
      .line {
        position:absolute;
        left:50%;
        top:110px;
        width:456px;
        height:14px;
        margin-left:-228px;
        background:url('~@/assets/login/login-line.png') no-repeat left center;
        background-size:456px 14px;
        animation:width 5s infinite ease-in-out;
      }
      .el-form-item--mini.el-form-item,
      .el-form-item--small.el-form-item {
        margin-bottom: 25px;
      }
      .el-input {
        background: url("~@/assets/login/input-bg.png") no-repeat center !important;
        background-size: 100% 100% !important;
        ::v-deep {
          .el-input__inner {
            height: 60px;
            line-height: 60px;
            border: none !important;
            padding-left: 80px;
            position: relative;
          }
          .el-input__prefix {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            font-size: 20px;
            color: #7ce1fe;
          }
        }
      }
    }
    .login-code {
      position: absolute;
      right: 10px;
      top: 10px;
      bottom: 10px;
      img {
        width: 109px;
        cursor: pointer;
        vertical-align: middle;
      }
    }
  }
}
.outer {
  position:relative;
  overflow:hidden;
  padding:1px;
  margin:0 5px;
  &::before {
    content:"";
    position:absolute;
    width:460px;
    height:460px;
    left:50%;
    top:50%;
    margin-left:-230px;
    margin-top:-230px;
    background:linear-gradient(90deg,#bff3f4,#05163e);
    animation: rotate 8s infinite linear;
  }
  .inner {
    position: relative;
  }
}
.btn {
  height: 50px;
  line-height: 50px;
  // margin: 0 5px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  // background: url("~@/assets/login/btn.png") no-repeat center;
  // background-size:102% 102%;
  // background-size: cover;
  background:linear-gradient(180deg,#06437c,#2ad7f3);
  // background:#035ab3;
  border:none;
  cursor: pointer;
    padding: 0;
    border-radius: 0;
}
.star {
  position:absolute;
  top:100%;
  width:7px;
  height:230px;
  background:url('~@/assets/login/star.png') no-repeat center;
  background-size:100% 100%;
  animation: up 4s linear infinite;
  z-index:1;
}
@keyframes up {
  0% {
    opacity:0;
  }
  40% {
    opacity:1;
  }
  100% {
    top:0;
    opacity:0;
  }
}
@keyframes left {
  0% {
    transform:translateX(-80px);
    opacity:0;
  }
  100% {
    transform:translateX(0);
    opacity:1;
  }
}
@keyframes right {
  0% {
    transform:translateX(80px);
    opacity:0;
  }
  100% {
    transform:translateX(0);
    opacity:1;
  }
}
@keyframes rotate {
  0% {
    transform:rotate(0);
  }
  100% {
    transform:rotate(360deg);
  }
}
@keyframes width {
  0% {
    width:0;
  }
  70%{
    width:456px;
  }
  100% {
    width:456px;
  }
}

</style>
